<template>
  <d2-container>
    <el-form inline
             style="width: 100%; text-align: left"
             label-width="80px"
             ref="form"
             size="small">
      <el-form-item>
        <el-button type="primary" @click="create">新增</el-button>
        <el-button type="primary" @click="deleteRow">删除</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="list"
              border
              :resizable="false"
              @selection-change="handleSelectionChange"
              stripe>
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="image"
                       label="图片">
        <template slot-scope="{ row }">
          <el-image fit="cover" :src="row.image" class="fit-size"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="创建时间"
                       prop="time_create">
        <template slot-scope="{ row }">
          {{row.time_create | timeFilter}}
        </template>
      </el-table-column>
      <el-table-column label="状态"
                       prop="status">
        <template slot-scope="{ row }">
          {{row.status | normalStatusFilter}}
        </template>
        </el-table-column>
      <el-table-column fixed="right"
                       label="操作"
                       width="145">
        <template slot-scope="{row}">
          <div class="operation_body">
            <el-button type="text"
                       size="small" @click="editRow(row)">编辑</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination layout="total, prev, pager, next"
                   background
                   @current-change="fetch"
                   :current-page.sync="currentPage"
                   :page-size="limit"
                   style="display: flex;justify-content: center;"
                   :total="total">
    </el-pagination>
    <banner-edit ref="bannerEdit"></banner-edit>
  </d2-container>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import commonCurd from '@/mixin/common-curd'
import bannerEdit from './components/banner-edit'
import { del } from './api'

export default {
  name: 'users',
  data () {
    return {
      query: {},
      multipleSelection: []
    }
  },
  mixins: [commonCurd],
  components: {
    bannerEdit
  },
  async asyncData ({ store, route }) {
    return store.dispatch('banner/fetchList', { page: 1, limit: 12 })
  },
  computed: {
    ...mapGetters('banner', ['list', 'total'])
  },
  methods: {
    ...mapActions('banner', ['fetchList']),
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    async editRow (row) {
      await this.$refs.bannerEdit.open(row)
      this.fetch()
    },
    async create () {
      await this.$refs.bannerEdit.open(false)
      this.fetch()
    },
    async deleteRow () {
      if (!this.multipleSelection.length) {
        this.$message.warning('请选择需要删除的轮播图')
        return
      }
      const ids = this.multipleSelection.map(({ id }) => id)
      await del({ ids: ids.join(',') })
      this.multipleSelection = []
      this.$message.success('删除成功')
      this.fetch()
    }
  }
}
</script>

<style lang="scss" scoped>
.fit-size {
  height: 259px;
}
</style>
